<template>
  <scroll-view
    :scroll-x="scrollX"
    :scroll-y="getScrollY"
    :scroll-left="scrollLeft"
    :scroll-top="scrollTop"
    scroll-with-animation
    class="tabs-scroll"
    :class="[{ 'scroll-x': scrollX }]"
  >
    <view class="tabs-scroll__list">
      <view
        v-for="(item, itemIndex) in list"
        :key="itemIndex"
        class="tabs-scroll__item"
        :class="[`tabs-scroll__item${itemIndex}`]"
        @click="click(itemIndex)"
      >
        <slot
          :index="index"
          :prev="itemIndex === index - 1"
          :next="itemIndex === index + 1"
          :item="item"
          :item-index="itemIndex"
          :active="itemIndex === index"
          :args="args"
        >
        </slot>
      </view>
    </view>
  </scroll-view>
</template>

<script lang="ts">
import { defineComponent, computed, watch, ref } from '@vue/composition-api'
import boundingClientRect from '@/utils/bounding-client-rect'
import getCurrentComponent from '@/utils/get-current-component'

export default defineComponent({
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    index: {
      type: Number,
      default: -1,
    },
    scrollX: {
      type: Boolean,
      default: true,
    },
    args: {
      //外部要用的变量
      type: Object,
      default: () => ({}),
    },
    disabledScroll: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    const vm: any = getCurrentComponent()
    const click = (index: number) => {
      emit('update:index', index)
      emit('change', index)
    }
    const getScrollY = computed(() => {
      return !props.scrollX
    })
    const scrollTop = ref(0)
    const scrollLeft = ref(0)

    watch(
      () => props.index,
      async (newVal) => {
        if (props.disabledScroll) return
        const {
          width: itemRectWidth = 0,
          left: itemRectLeft = 0,
          top: itemRectTop = 0,
          height: itemRectHeight = 0,
        } = (await boundingClientRect(`.tabs-scroll__item${newVal}`, vm)) as UniApp.NodeInfo
        const { top: listRectTop = 0, left: listRectLeft = 0 } = (await boundingClientRect(
          `.tabs-scroll__list`,
          vm
        )) as UniApp.NodeInfo
        const { width: parentRectWidth = 0, height: parentRectHeight = 0 } = (await boundingClientRect(
          `.tabs-scroll`,
          vm
        )) as UniApp.NodeInfo

        if (props.scrollX) {
          const sl = itemRectWidth / 2 + itemRectLeft - listRectLeft - parentRectWidth / 2

          scrollLeft.value = sl
        } else {
          const st = itemRectHeight / 2 + itemRectTop - listRectTop - parentRectHeight / 2

          scrollTop.value = st
        }
      }
    )

    return {
      scrollTop,
      scrollLeft,
      getScrollY,
      click,
    }
  },
})
</script>
<style lang="scss" scoped>
.tabs-scroll {
  width: 100%;
  height: 100%;
  &__list {
    display: flex;
    flex-direction: column;
  }
  &.scroll-x {
    .tabs-scroll__list {
      flex-direction: row;
    }
  }
}
</style>
